<script setup>
import custromHeader from '@/components/custromHeader.vue'
import custromFooter from '@/components/footer.vue'
import custromMovieList from '@/components/movieList.vue'

import { useRoute,useRouter } from 'vue-router'
import {getDetail} from '@/api/detail'
import {onMounted,reactive,ref,watch} from 'vue'
import { Message } from '@arco-design/web-vue'
import {useStore} from '@/stores/home'


const homeStore = useStore()
homeStore.updateMenuList()


const route = useRoute()
const router = useRouter()
let {path} = route.query
console.log('当前页面收到的参数',path);


// 判断当前是否携带详情页参数
let checkDetail = () => {
    if (path.trim() == '') {
        router.replace({path:'/404'})
        return
    }
}


// 存储当前详情页面信息
let movieInfo = reactive({

})

// 当前可以播放线路的index信息
let canPlayIndex = ref(0)
let canPlayList = ref({})
// 修改当前的线路的index信息
let uploadCanPlayIndex = (index) => {
    canPlayIndex.value = index
    canPlayList.value = movieInfo.playlist[index].play_item_list
    // Message.success('切换成功')
}


let guessList = ref([])

// 获取当前页面详情
let getDetailData = async (path) => {
    let {data:res} = await getDetail(path)
    console.log('当前页面返回数据',res);
    if (res.code == 200) {
        Message.success(res.msg)
        Object.keys(res.data).forEach(item => {
            movieInfo[item] = res.data[item]
        })
        guessList.value = res.data.guess.guessList
        canPlayList.value = res.data.playlist[0].play_item_list
        console.log('猜你喜欢列表',guessList);
        console.log('当前影视详情',movieInfo);
    }else {
        Message.error(res.msg)
    }
}

// 剧集点击函数
let jujiClickHandler = (playPath,index) => {
    console.log('play-path',playPath);
    let base = window.btoa(playPath)  // 加密
    let title = movieInfo.playTitle // 名称
    let start = movieInfo.playStart // 明星
    let type = movieInfo.playType // 类型
    let introduce = movieInfo.playIntroduce // 简介
    let tIndx = canPlayIndex.value // tab标签索引
    
    let idx = index
    
    router.push({path:'/play',query:{tIndx,idx,playPath:base,title,start,type,introduce}})
}

// 监听当前页面路由如果发生变化重新请求
watch(()=>route.query.path,(newPath,oldpath)=>{
    path = newPath
    getDetailData(path)
})

onMounted(() => {
    checkDetail()
    getDetailData(path)
})

</script>

<template>
  <custromHeader :menu-list="homeStore.menuList"></custromHeader>
  <div class="detail-view">
    <div class="detail-view-container">
        <div class="container">
            <div class="left">
                <img class="play-cover" :src="movieInfo.playCover" alt="">
            </div>
            <div class="right">
                <div>
                    <h2 class="play-title">{{movieInfo.playTitle}}</h2>
                    <h4 class="play-start">{{movieInfo.playStart}}</h4>
                    <p class="play-type">影片类型:{{movieInfo.playType}}</p>
                    <p class="play-introduce">剧情介绍:{{movieInfo.playIntroduce}}</p>
                    <button class="play-control">播放</button>
                    <div class="play-tips">当前可用播放线路</div>
                </div>
                <div class="play-list">
                    <!-- 可供放映的线路列表 -->
                    <ul class="can-play-list">
                        <li :class="[canPlayIndex == index ? 'can-play-item can-play-item-active' : 'can-play-item']" @click="uploadCanPlayIndex(index)" v-for="(item,index) in movieInfo.playlist" :key="index">
                            {{item.play_item_title}}
                        </li>
                    </ul>
                    <!-- 单个小面的放映列表 -->
                    <ul class="juji-play-list">
                        <li class="juji-play-item" v-for="(item,index) in canPlayList" :key="item" @click="jujiClickHandler(item.juji_href,index)">
                            {{item.juji_title}}
                        </li>
                        <li class="colp" v-for="(item) in 10" :key="item">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </div>
  <custromMovieList :movieList="guessList" cateTitle="猜你喜欢"></custromMovieList>
  <!-- 猜你喜欢 -->
  <div class="guess">
        <div class="guess-list">
        </div>
    </div>
  <custromFooter></custromFooter>
</template>


<style lang="less" scoped>
.detail-view {
    width: 100%;
    background: #f9f9f9;
    .detail-view-container {
        margin: 0 auto;
        width: 1300px;
        max-width: 100%;
        .container {
            display: flex;
            height: 400px;
            // align-items: center;
            .left {
                .play-cover {
                    width: 280px;
                    height: 100%;
                    border-radius: 4px;
                }
            }
            .right {
                width: 100%;
                overflow: hidden;
                box-sizing: border-box;
                padding: 0px 15px;
                .play-title {
                    margin-bottom: 20px;
                }
                .play-start {
                    font-size: 14px;
                    color: #000000;
                    margin-bottom: 20px;
                }
                .play-type {
                    font-size: 14px;
                    color: #000000;
                    margin-bottom: 20px;
                }
                .play-introduce {
                    height: 48px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 100%;
                    line-height: 24px;
                    color: #1d1d1d;
                }
                .play-control {
                    outline: none;
                    border: none;
                    width: 120px;
                    padding: 8px 15px;
                    background: #884dff;
                    color: #fff;
                    border-radius: 5px;
                    transition: .3s all;
                    cursor: pointer;
                    &:hover {
                        background: #793eee;
                        border-radius: 12px;
                    }
                }
            }
        }
    }
}

.guess {
    width: 100%;
    .guess-list {
        width: 1300px;
        max-width: 100%;
        margin: 0 auto;
        .guess-list- {
            display: flex;
            width: 100%;
        }
    }
}


/deep/ .hit-movie-container,/deep/ .hit-movie-list,/deep/.cate-title{
    background: #fff;
}

.cc-container {
    background: #fff;
}

.play-tips {
    margin: 12px 0px;
}
.play-list {
    height: calc(100% - 262.52px);
    width: 100%;
    // background: #e8e8e8;
    .can-play-list {
        // background: #f0f0f08e;
        width: 100%;
        display: flex;
        .can-play-item {
            padding: 8px 16px;
            background: #f0f0f08e;
            font-weight: 600;
            cursor: pointer;
        }
        .can-play-item-active {
            background: #fff;
            border: 1px solid #ededed;
        }
    }
    .juji-play-list {
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        height: calc(100% - 35.5px);
        overflow-y: auto;
        padding: 12px 0px;
        .juji-play-item {
            width: 99px;
            min-width: 99px;
            text-align: center;
            height: 32px;
            transition: .3s all;
            line-height: 32px;
            cursor: pointer;
            &:hover {
                color: #fff;
                background: #884dff;
            }
        }
        .colp {
            width: 99px;
            height: 0px;
            // padding: 8px 16px;
        }
    }
}


@media screen and (max-width:480px){ 
    .container {
        // flex-direction: column !important;
        height: auto !important;
    }
    .play-cover {
        width: 109px !important;
        height: 143.333px !important;
        margin-bottom: 20px;
    }
    .right {
                width: 100%;
                overflow: hidden;
                box-sizing: border-box;
                padding: 0px 15px;
                .play-title {
                    margin-bottom: 6px !important;
                }
                .play-start {
                    width: 100%;
                    font-size: 14px;
                    color: #000000;
                    margin-bottom: 6px !important;
                    height: 14px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .play-type {
                    font-size: 14px;
                    color: #000000;
                    margin-bottom: 0px !important;
                }
                .play-introduce {
                    height: 22px;
                    font-size: 12px;
                    width: 100%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    line-height: 12px;
                    color: #1d1d1d;
                }
                .play-control {
                    outline: none;
                    border: none;
                    width: 120px;
                    padding: 8px 15px;
                    background: #884dff;
                    color: #fff;
                    border-radius: 5px;
                    transition: .3s all;
                    cursor: pointer;
                    &:hover {
                        background: #793eee;
                        border-radius: 12px;
                    }
                }
            }
            .juji-play-list {
                height: auto !important;
            }
            .juji-play-item {
                text-align: left !important;
            }
 }

</style>